<template>
	<view class="cart">
		<view class="top">
			<view class="right" @click="status = !status">
				<text v-if="status">完成</text>
				<text v-else>编辑</text>
			</view>
		</view>
		<!-- 购物车商品列表 -->
		<view class="conter" v-if="cartData.goods_lists && cartData.goods_lists.shoppingCartItemList.length">
			<view class="have">
				<!-- 遍历每一个商品 -->
				<view class="li" v-for="(item,index) in cartData.goods_lists.shoppingCartItemList" :key="index">
					<!-- 选框 -->
					<view class="uni-switch" style="overflow: hidden;">
						<switch :checked="item.isChecked"
							@change="checkCart({shoppingcartIds:[item.shoppingcartId],isChecked:$event.detail.value})"
							type="checkbox" />
					</view>
					<!-- 商品信息 -->
					<view class="content">
						<!-- 图片 -->
						<image :src="item.skuImage" style="width: 85px; height: 85px;"></image>
						<!-- 文本详情 -->
						<div class="text">
							<view class="h4">{{item.productName}}</view>
							<view class="p" v-if="item.skuAttrList&&item.skuAttrList.length">
								{{item.skuAttrList[0].value}}
							</view>
							<view class="h5">
								<text>￥{{item.price / 100}}</text>
								<uni-number-box
									@change='updateCart({"num":$event-item.buyNumber,"shoppingcartId":item.shoppingcartId})'
									v-model="item.buyNumber"></uni-number-box>
							</view>
						</div>
					</view>
					<view class="del" @click='dropCart({"shoppingCartId":item.shoppingcartId,"parentId":"0"})'>删除</view>
				</view>
			</view>
			<view class="kong">

			</view>
		</view>
		<!-- 底部操作结算 -->
		<view class="botton" v-if="cartData.goods_lists">
			<!-- 全选 -->
			<view class="le">
				<label class="radio">
					<view class="uni-switch">
						<switch :checked="cartData.isCheckedAll" @change="checkAll($event.detail.value)"
							type="checkbox" />
					</view>
					<text>全选</text>
				</label>
			</view>
			<view class="ri">
				<view class="settlement" v-if="status">
					<view class="text">
						<view>合计： <text class="primary">{{cartData.goods_lists.productPrice/100}}</text></view>
						<view>促销减：{{0}}</view>
					</view>
					<navigator class="navT" open-type="navigate" url="../../cart/pages/create/create">
						<button type="primary" size="mini">去结算({{cartData.goods_lists.checkedProductAmount}})</button>
					</navigator>
				</view>
				<view class="delete" v-else>
					<button size="mini" type="warn" @click="delAll">删除</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	// -----引入----------------------------------------------------------------------
	import {
		ref
	} from "vue"
	import {
		onShow
	} from "@dcloudio/uni-app"
	import {
		getCart, // 获取购物车数据
		GetCartTotal, // 获取购物车商品数量
		dropGoods,
		updateAmount,
		checkShop
	} from "../../api/auth.js"
	// -----定义数据----------------------------------------------------------------------
	// 定义购物车的数据
	const cartData = ref({})
	// 定义编辑状态
	const status = ref(true);




	// -----定义方法----------------------------------------------------------------------

	// 获取购物车的总数量，更新底部栏购物数据
	onShow(() => {
		// 默认获取购物车列表
		getCartList();

	})

	function getCartList() {
		getCart()
			.then(res => {
				cartData.value = res.data;
				// 更新底部栏的小红点
				uni.setTabBarBadge({
					index: 2,
					text: res.data.goods_lists.checkedProductAmount
				})
			})
	}
	// 勾选
	function checkCart(data) {
		checkShop(data)
			.then(res => {
				// 更新商品列表
				getCartList()
			})
	}
	// 全选
	function checkAll(flag) {
		// 执行checkcart方法 需要把原来购物商品遍历映射获取新的shoppingcartIds数组
		checkCart({
			shoppingcartIds: cartData.value.goods_lists.shoppingCartItemList.map(item => item.shoppingcartId),
			isChecked: flag
		})
	}
	// 删除
	function dropCart(data, all = false) {
		// 如果是全删不询问
		if (all) {
			dropGoods(data)
				.then(res => {
					getCartList();
				})
		} else {
			// 删除单个询问一次
			uni.showModal({
				title: '确认删除商品？',
				success(res) {
					if (res.confirm) {
						dropGoods(data)
							.then(res => {
								// 删除完毕获取新的商品类别
								getCartList();
							})
					}
				}
			})
		}
	}
	// 全删
	function delAll() {
		// 先询问再删除
		uni.showModal({
			title: '确认删除商品？',
			success(res) {
				if (res.confirm) {
					cartData.value.goods_lists.shoppingCartItemList.forEach(item => {
						// 遍历所有的商品
						if (item.isChecked) {
							// 如果选中开始执行“全删” 也是一个一个删除，传第二参数为true
							dropCart({
								"shoppingCartId": item.shoppingcartId,
								"parentId": "0"
							}, true)
						}
					})
				}
			}
		})

	}
	// 更新
	function updateCart(data) {
		updateAmount(data)
			.then(res => {
				// 获取购物车数据
				getCartList();
			})
	}
</script>

<style lang="scss">
	.cart {
		width: 100vw;
		min-height: 80vh;
		background-color: #f5f5f5;

		.top {
			position: fixed;
			top: 100rpx;
			width: 100%;
			height: 100rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			.right {
				margin-right: 20rpx;

				text {
					display: inline-block;
					width: 120rpx;
					height: 60rpx;
					text-align: center;
					line-height: 60rpx;
				}
			}
		}

		.conter {
			padding-top: 100rpx;
			padding-bottom: 100px;

			.have {
				.li {
					position: relative;
					width: 94%;
					height: 300rpx;
					background-color: #fff;
					margin: 0 3%;
					margin-top: 30rpx;
					box-sizing: border-box;
					padding: 20rpx;
					border-radius: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-bottom: 40rpx;

					.uni-switch {
						width: 22px;
						height: 22px;
						border-radius: 50% !important;
						border: 1rpx solid #999;
						padding-bottom: 15rpx;
						box-sizing: border-box;
					}



					.del {
						position: absolute;
						bottom: 20rpx;
						right: 25rpx;
						font-size: 30rpx;
						color: #6b6d6d;
					}

					.uni-numbox {
						input {
							background-color: #fff !important;
						}
					}

					.content {
						line-height: 1;
						display: flex;
						align-items: center;
						flex: 1;

						.h4 {
							font-weight: 700;
							font-size: 33rpx;
							margin-top: 20rpx;
						}

						.p {
							font-size: 26rpx;
							color: #999;
							padding: 5rpx 0 5rpx 0;
						}

						.h5 {
							display: flex;
							align-items: center;

							text {
								color: #fd5929;
								font-weight: 900;
								margin-right: 20rpx;
							}
						}
					}
				}
			}

			.kong {}
		}

		.botton {
			position: fixed;
			right: 0;
			bottom: 100rpx;
			width: 100%;
			height: 120rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 20rpx;

			.le {
				margin-left: 20rpx;

				.radio {
					display: flex;
					flex-direction: column;
					align-items: center;

					text {
						font-size: 22rpx;
						text-align: center;
						margin-top: 4rpx;
					}

					.uni-switch {
						border-radius: 50% !important;
					}

				}
			}

			.ri {
				// flex: 1;

				.settlement {
					width: 600rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-left: 20rpx;

					.text {
						font-size: 26rpx;

						view:nth-of-type(1) {
							font-size: 36rpx;
							font-weight: 900;

							text {
								color: #fd5929;
							}
						}

						view:nth-of-type(2) {
							color: #717373;
						}
					}

					.navT {
						margin-right: 30rpx;
					}
				}

				.delete {
					margin-right: 20rpx;
				}
			}
		}

	}
</style>